<template>
  <div>
    <ul class="map-control">
      <li
        v-for="(item,index) in els"
        :key="index"
        :class="item.type"
        @click.stop="setVisible(item.type)"
        :title="item.tooltip"
      >
        <div class="line" v-if="index !==0"></div>
        <div class="tubiao">
          <i :class="item.class"></i>
        </div>
      </li>
    </ul>
    <Layers
      v-show="showMapControl"
      @close="closeMain('map')"
      @getOtherLegendHidden="getOtherLegendHidden"
      @getOtherLegendVisible="getOtherLegendVisible"
      ref="layers_zw"
    ></Layers>
    <!-- 专题图层的图例 -->
    <legend-frame :otherLegend="otherLegends" @closeLegend="closeLegend" ref="legendFrame" v-show="otherLegends.length"></legend-frame>
    <div class="formMate-data-box" :style="`height:100%;width:${currentWidth}px`" v-show="enlargeTable||enlargeChart">
      <transition name="el-zoom-in-center">
        <div class="transition-box table-data-box" v-show="enlargeTable||enlargeChart">
          <EnlargeTable></EnlargeTable>
          <EnlargeChart></EnlargeChart>
        </div>
      </transition>
    </div>

    <div class="historyRegionLegend"  @mousedown="mousedown" :style="styles">
      <p class="title">边界图例</p>
      <div class="content">
        <div class="color" :style="{backgroundColor:defaultLayer.lineColor}"></div>
        <p>{{defaultLayer.name}}</p>
        <div class="color" :style="{backgroundColor:activeHistoryRegion.lineColor}"></div>
        <p>{{activeHistoryRegion.name}}</p>
      </div>
    </div>

    <div class="controlMarkerShowOrHidden" @mousedown="markerControlMousedown" :style="markerControlstyles" v-if="status.markerControlStatus">
      <p class="title">标签图例</p>
      <div class="content">
        <el-switch
          v-model="status.markerStatus"
          active-text="显示"
          inactive-text="隐藏"
          active-color="#25b9d9"  
          inactive-color="#ddd"
          @change="markerStatusChange">
        </el-switch>
       </div>
    </div>
  </div>
</template>

<script>
import Layers from "./layers.vue";
import { mapState, mapMutations } from "vuex";
import EnlargeChart from "./zoomMain/enlargeChart";
import EnlargeTable from "./zoomMain/enlargeTable";
import LegendFrame from "@/components/LegendFrame/index";
import historyHlLayer from "@/utils/map/lib/systemlayers/history.hl.layer.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import microConfig from "static/config/micro.js";

export default {
  name: "MapControl",
  props: [],
  data() {
    return {
      currentWidth:"84%",
      overLayerData:[],//图层
      els: [
        {
          class: "iconfont icon-ditu",
          type: "layercontrol-layer",
          tooltip: "底图"
        },
        {
          class: "iconfont icon-biaoge",
          type: "layercontrol-table",
          tooltip: "表格"
        },
        {
          class: "iconfont icon-tongjitubiao",
          type: "layercontrol-echarts",
          tooltip: "图表"
        },
        {
          class: "el-icon-video-play",
          type: "playMap",
          tooltip: "播放历史边界"
        }
      ],
      layersVisible: false,
      otherLegends: [],
      echartsVisible:false,
      tableVisible:false,
      playStatus:true,
      timeObj:null,
      playMapStatus:false,
      defaultLayer:{},
      activeHistoryRegion:{},
      styles: {
        position: "absolute",
        bottom: "20px",
        left: "315px",
        cursor: "move",
        top:''
      },
      markerControlstyles:{
        position: "absolute",
        bottom: "110px",
        left: "315px",
        cursor: "move",
        top:''
      },
      status:{
        markerStatus:true,
        markerControlStatus:false
      }
    };
  },
  components: { Layers, LegendFrame,EnlargeChart,EnlargeTable },
  mounted(){
     EventBus.$on("clearPlayMap", this.clearPlayMap);
     EventBus.$on("refreshBoundaryFeaturesComplete", this.refreshBoundaryFeaturesComplete);
     EventBus.$on("changeMarkerControlStatus", this.changeMarkerControlStatus);
  },
  destroyed(){
     EventBus.$off("clearPlayMap");
     EventBus.$off("refreshBoundaryFeaturesComplete");
     EventBus.$off("changeMarkerControlStatus");
  },
  computed: {
    ...mapState({
      showEchartsLayer: state => state.micro.showEchartsLayer
    })
  },
   
  methods: {
    ...mapMutations(["changeShowEchartsLayer","changeShowMapTableLayer","changeShowMapControl","changeShowEchartPanel",
      "changeShowDataTable"]),
    //更新Marker图例状态
    changeMarkerControlStatus(statusobj){
      this.status.markerControlStatus = statusobj.changeMarkerControlStatus;
      this.status.markerStatus = statusobj.markerStatus;
    },
    mousedown(e) {
      document.onmousemove = e2 => {
        this.styles.left = (e2.clientX - e.offsetX)+"px";
        this.styles.top = (e2.clientY - e.offsetY)+"px";
        this.styles.bottom = "auto";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    },
    markerControlMousedown(e){
      document.onmousemove = e2 => {
        this.markerControlstyles.left = (e2.clientX - e.offsetX)+"px";
        this.markerControlstyles.top = (e2.clientY - e.offsetY)+"px";
        this.markerControlstyles.bottom = "auto";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    },
    markerStatusChange(){
      EventBus.$emit("toggleMarkerLayer",this.status.markerStatus)
    },
    setVisible(type) {
      let that = this;
      switch (type) {
        case "layercontrol-layer":    
          if(this.showMapControl){
            this.$store.commit("changeShowMapControl",false)
          }else{
            this.$store.commit("changeShowMapControl",true)
          }
          break;
        case "layercontrol-table":
          if(this.showMapTableLayer){
            this.$store.commit("changeShowMapTableLayer", false);
          }else{
            this.$store.commit("changeShowMapTableLayer", true);
          }
          break;
        case "layercontrol-echarts":
          if(this.showEchartsLayer){
            this.$store.commit("changeShowEchartsLayer", false);
          }else{
            this.$store.commit("changeShowEchartsLayer", true);
          }
          break;  
        case "playMap":
          that.playMap();
          break;
      }
    },
    refreshBoundaryFeaturesComplete(){
      this.defaultLayer=historyHlLayer.defaultLayer;
      this.activeHistoryRegion = {};
    },
    clearPlayMap(){
      const map = sgisMapBase.getMap();
      historyHlLayer.clearHisBoundary(map);
      this.playMapStatus = false;
      this.els[3].class = "el-icon-video-play";
      clearInterval(this.timeObj );
      sessionStorage.setItem('playMapStatus',this.playMapStatus);
      this.activeHistoryRegion = {};
    },
    //播放底图
    playMap(){
      let that = this;
      if(!this.playMapStatus){
        this.playMapStatus = true;
        this.els[3].class = "el-icon-video-pause";
        clearInterval(this.timeObj );
        let hisLayerInfo = historyHlLayer.hisLayerInfo;
        const map = sgisMapBase.getMap();
        let i = 0;

        this.timeObj = setInterval(function(){
          historyHlLayer.hideHisBoundary(map);
          that.activeHistoryRegion = hisLayerInfo[i]; 
          let layerName = hisLayerInfo[i].layerName;
          if (map.getLayer(layerName)) {
            let layer = map.getLayer(layerName);
            map.setLayoutProperty(layerName, 'visibility', 'visible');
          }
          i++;
          if(!(i<hisLayerInfo.length)){
            i=0;
          }
        },microConfig.playMapTime);
      }else{
        this.playMapStatus = false;
        this.els[3].class = "el-icon-video-play";
        clearInterval(this.timeObj );
      }
      sessionStorage.setItem('playMapStatus',this.playMapStatus);
    },
    getOtherLegendVisible(item) {
      this.otherLegends = item;
    },
    getOtherLegendHidden(item) {
      this.otherLegends = item;
      this.$refs.legendFrame.ColorPickerVisible = false;
    },
    closeLegend(item) {
      let key = "";
      let res = "";
      this.$refs.layers_zw.overLayerData.forEach((value, index) => {
        if (value.layerId === item.layerId) {
          key = index;
          res = item;
        }
      });
      this.$refs.layers_zw.setOverLayerHidden(res, key);
    },
    closeMain(type){
      if(type == "echarts"){
        this.$store.commit("changeShowEchartsLayer", false);
      }else if(type == "map"){
        this.$store.commit("changeShowMapControl",false)
      }else{
        this.$store.commit("changeShowMapTableLayer", false);
      }
    }
  },
  computed: {
      ...mapState({
        showEchartsLayer:state => state.micro.showEchartsLayer,
        showMapTableLayer:state => state.micro.showMapTableLayer,
        isSearchData: state => state.micro.isSearchData,
        showMapControl: state => state.micro.showMapControl,
        enlargeTable: state => state.micro.enlargeTable,
        enlargeChart: state => state.micro.enlargeChart,
      })
    },
};
</script>

<style  rel='stylesheet' lang='scss' scoped>
@import "../css/rule.scss";
$width: 38px;
.map-control {
  padding: 0;
  margin: 0;
  width: $width;
  color: $fontColorLimit;
  background: $backGroundColor;
  position: fixed;
  right: 5px;
  top: 45%;
  z-index: 1000;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  li {
    width: $width;
    list-style: none;
    cursor: pointer;
    .tubiao {
      width: $width;
      line-height: 39px;
      text-align: center;
      i {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .line {
      margin: 0 auto;
      width: 20px;
      background: $fontColor;
      height: 2px;
    }
  }
}
.formMate-data-box {
  z-index: 1200;
  width: calc(100% - 310px);
  height: 90%;
  background: transparent;
  .table-data-box {
    width: 100%;
    height: 100%;
  }
  position: fixed;
  right: 0;
  top: 0;
}
.historyRegionLegend{
  position: absolute;
  // bottom: 20px;
  left: 315px;
  cursor: default;
  background: rgba(18, 90, 120, 0.5);
  z-index: 1100;
  padding: 10px;
  height: auto;
  max-height: 94px;
  box-sizing: border-box;
  .title{
    text-align: center;
    color:$fontColorW;
    font-size: $fontSize;
  }
  .content{
    width:120px;
    height: auto;
    display: inline-block;
    .color{
      margin-top: 11px;
      width: 50px;
      height: 4px;
      float: left;
      margin-right: 10px;
    }
    p{
      color:$fontColorW;
      font-size: $fontSizeSmall;
      float: left;
      line-height: 2;
    }
  }
}
.controlMarkerShowOrHidden{
  position: absolute;
  left: 315px;
  cursor: default;
  background: rgba(18, 90, 120, 0.5);
  z-index: 1100;
  padding: 10px;
  height: auto;
  max-height: 94px;
  box-sizing: border-box;
  .title{
    text-align: center;
    color:$fontColorW;
    font-size: $fontSize;
  }
  .content{
    margin-top: 7px;
  }
}
</style>
<style lang="scss">
@import "../css/rule.scss";
.formMate-data-box{
  .el-select-dropdown{
    width: 194px;
  }
}
.controlMarkerShowOrHidden{
  .content{
    margin-top: 7px;
    .el-switch{
      .el-switch__label{
        color: $fontColorLimit;
      }
      .el-switch__label.is-active {
        color: #25b9d9;
      }
    }
  }
}
</style>